import React from 'react';

import {
  View,
  TouchableOpacity,
  Text,
  Keyboard,
} from 'react-native';

import {SearchBar} from 'react-native-elements';
import dismissKeyboard from 'dismissKeyboard';

import Config from '../../config';
import SizeUtils from '../../common/SizeUtils';
import CommonListPage from './CommonListPage';
import TImage from '../../components/TImage';

export default class CommonSearchListPage extends CommonListPage {
  constructor(props) {
    super(props);

    this.state.searchText = "";
    this._autoInitRequest = false;
    this._gotoItem = false;
  }

  _onPressItem(data) {
    this._gotoItem = true;
  }

  _renderTopView() {
    <View style={{flexDirection:"row",
       borderColor: '#eeeeee',
       height:SizeUtils.translateDesignHeightToCode(90),
       paddingLeft:SizeUtils.translateDesignWidthToCode(40),
       paddingRight:SizeUtils.translateDesignWidthToCode(40),
       borderBottomWidth: SizeUtils.translateDesignNumToCode(3)}}>
      {this._renderSearchBg()}
    </View>
  }

  _onRenderItem(data, index) {

  }

  _requestData(page, listView) {
    clearTimeout(endTimer)
    if(this.state.searchText != "") {
      this._sendAction(page, listView);
    }
    else {
      var endTimer = setTimeout(()=>{
       this._listView.finish(2, []);
     }, 1000);
    }
  }

  _sendAction(page, listView) {

  }

  _renderSearchBg() {
    return(
      <View style={{height:SizeUtils.translateDesignHeightToCode(90),
          flexDirection:"row", alignItems:"center"}}>
        <SearchBar
          round
          noIcon = {true}
          containerStyle = {this._getSearchBarContainerStyle()}
          inputStyle = {{padding:0,height:SizeUtils.translateDesignHeightToCode(62), color:"#000000",
            backgroundColor:"#eeeeee", marginLeft:0, marginRight:0,
            marginTop:0, marginBottom:0, paddingRight:0, paddingLeft:SizeUtils.translateDesignWidthToCode(78),
            fontSize:SizeUtils.translateFontSizeToCode(30)}}
          multiline = {false}
          onSubmitEditing = {() => this._onSubmitEditing()}
          value = {this.state.searchText}
          underlineColorAndroid="transparent"
          returnKeyType = "search"
          blurOnSubmit={true}
          // lightTheme = {true}
          onChangeText={this._onSearchBarChange.bind(this)}
          clearButtonMode={'always'}
          enablesReturnKeyAutomatically={true}
          placeholder='搜点什么吧' />
        <TouchableOpacity onPress={this._onPressCancel.bind(this)} style={{paddingLeft:SizeUtils.translateDesignWidthToCode(20)}}>
          <Text style={{color:"#000000", fontSize:SizeUtils.translateFontSizeToCode(30),}}>
            取消
          </Text>
        </TouchableOpacity>
        <View style={{position:"absolute",
            top:(SizeUtils.translateDesignHeightToCode(90) - SizeUtils.translateDesignWidthToCode(34))/2,
            left:SizeUtils.translateDesignWidthToCode(26)}}>
        <TImage source={require("../../../resource/images/workhard/search_gray.png")}
          style={{width:34, height:34, }}/>
        </View>
      </View>
    )
  }

  _getSearchBarContainerStyle() {
    return {width:SizeUtils.translateDesignWidthToCode(590), borderTopWidth:0,borderBottomWidth:0,
      height:SizeUtils.translateDesignHeightToCode(62),backgroundColor:"#00000000",};
  }

  _getListViewStyle() {
    return {
        width:(SizeUtils.getWindowSize().width - SizeUtils.translateDesignWidthToCode(80)),
        marginLeft:SizeUtils.translateDesignWidthToCode(40),
        height:(SizeUtils.getWindowSize().height - Config.paddingTop - SizeUtils.translateDesignHeightToCode(40 + 90)),
        backgroundColor:"#ffffff"};
  }

  _onSubmitEditing() {
    if(this._listView != null){
      this._listView.doRefresh();
    }
  }

  _onPressCancel() {
    this.goBack();
  }

  _dealEnterPage(){
    this._gotoItem = false;
  }

  _dealLeavePage() {
    if(this._gotoItem === true) {
      return;
    }
    Keyboard.dismiss();
    this.setState({searchText:null});
    this.clear();
  }

  _onSearchBarChange(data) {
    this.setState({
      searchText:data,
    })
  }
}
